<!-- 摆摊 -->
<template>
	<view class="box">
		<view  class="content">
			<view class="content-user">
				<image :src="userinfo.avatar?userinfo.avatar:'../../static/userbj.png'" mode="aspectFill"></image>
			</view>
			<view class="top-name" v-if="userinfo.nickname">
				{{userinfo.nickname}}
			</view>
			<view class="top-name" @click="onlogoin" v-else>
				授权登录
			</view>
			<view class="top-info">
				<view class="top-info-left">
					<view class="title">奖励金</view>
					<view class="text">0</view>
				</view>
				<view class="top-info-left">
					<view class="title">累计</view>
					<view class="text">0</view>
				</view>
				<view class="top-info-right">
					<view @click="onwithdrawal">账户提现</view> 
				</view>
			</view>
			<view class="content-bottom">
				<view class="bottom-view">
					<view class="title"><text>0</text>人</view>
					<view class="name">推广用户</view>
				</view>
				<view class="bottom-view">
					<view class="title"><text>0</text>人</view>
					<view class="name" @click="ongoto('../subordinate/subordinate')">下级红娘 <u-icon name="arrow-right" color="#9f9f9f" style="margin-left: 10rpx;"></u-icon></view>
				</view>
				<view class="bottom-view">
					<view class="title"><text>0</text>人</view>
					<view class="name" @click="ongoto('../subordinatelevel/subordinatelevel')">下下级红娘 <u-icon name="arrow-right" color="#9f9f9f" style="margin-left: 10rpx;"></u-icon></view>
				</view>
			</view>
		</view>
		
		<view class="logo-view" @click="activate" >
			<image src="../../static/indexlogo.png"></image>
			<view class="logo-view-title">成为红娘赚取收益</view>
			<view class="logo-view-name"></view>
			<view class="logo-view-btn">成为红娘</view>
		</view>
		
		<view class="bootom-content">
			<view class="list" v-for="(item,index) in list" :key="index" @click="ongoto(item.url)">
				<view class="list-left">
					<u-icon :name="item.icone" :color="item.color" size="35" style="margin-right: 30rpx;"></u-icon>
					{{item.name}}
				</view>
				<view class="list-right">
					<u-icon name="arrow-right" color="#9f9f9f" size="30"></u-icon>
				</view>
			</view>
		</view>
		<u-popup v-model="showCode" close-icon-pos="top-left" mode="bottom" border-radius="14" :closeable="true">
			<view class="pop-view" style="background-color: #ffffff;">
				<view class="pop-title">长按二维码添加客服微信</view>
				<view class="pop-image">
					<image @longtap="bc_code('../../static/code.png')" src="../../static/code.png"></image>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list:[
					{icone:'order',name:'玩法说明',url:'../clause/clause',color:'#5fb05d'},
					{icone:'server-fill',name:'联系客服',url:'show',color:'#ffb35d'},
					{icone:'attach',name:'审核纸条',url:'../examine/examine',color:'pink'}
				],
				showCode:false,
				userinfo:{
					avatar:'', // 头像
					nickname:''// 昵称
				},
			};
		},
		watch: {
				
		},
		methods:{
			bc_code(image){
				let that = this;
				//console.log('保存二维码')
				uni.downloadFile({           //获得二维码的临时地址
					url:image,
					success:(res)=>{
						//console.log('获取url',res)
						if(res.statusCode == 200){
							uni.saveImageToPhotosAlbum({
								filePath:res.tempFilePath,//传入临时地址
								success() {
									uni.showToast({
										title: '保存成功',
										icon: 'none'
									});
								},
								fail() {
									uni.showToast({
										title: '保存失败',
										icon: 'none'
									});
								} 
							})
						}
					},
					fail:(err)=>{
						console.log(err)
					}
				})
			},
			onlogoin(){
				uni.login({
				  provider: 'weixin',
				  success: function (loginRes) {
				    console.log(loginRes,'-----123');
				  }
				});
				wx.getUserProfile({
				   desc: "获取你的昵称、头像、地区及性别",
					success: (infoRes) => {
						console.log(infoRes,'----85---')
					},
				})
			
			},
			onwithdrawal(){
				uni.navigateTo({
				    url: '../withdrawal/withdrawal'
				});
			},
			activate(){
				uni.navigateTo({
				    url: '../openPaly/openPaly'
				});
			},
			ongoto(url){
				if(url=='show'){
					return this.showCode = true
				}
				uni.navigateTo({
				    url: url
				});
				
			},
		},
		onLoad() {
			
			
		},
	}
</script>
<style>
	page{
		background-color: #F8F8F8;
	}
</style>
<style scoped lang="less">
.box{
	padding: 0 20rpx;
	padding-bottom: 50rpx;
	box-sizing: border-box;
}
.content{
	width: 100%;
	// height: 600rpx;
	background: #fff;
	border-radius: 20rpx;
	margin-top: 74rpx;
	position: relative;
	padding-top: 108rpx;
	box-sizing: border-box;
	padding-bottom: 60rpx;
	box-shadow: 0px 0px 40rpx 0px rgba(0, 0, 0, 0.12);
}
.content-user{
	position: absolute;
	top: -50rpx;
	left: 50%;
	transform: translateX(-50%);
	width: 142rpx;
	height: 142rpx;
	background: #fff;
	padding: 13rpx;
	box-sizing: border-box;
	border-radius: 50%;
	display: flex;
	justify-content: center;
	align-items: center;
	image{
		width: 100%;
		height: 100%;
		border-radius: 50%;
	}
}
.top-name{
	width: 100%;
	height: 35rpx;
	line-height: 35rpx;
	text-align: center;
	font-size: 28rpx;
	font-weight: bold;
}
.top-info{
	width: 100%;
	height: 120rpx;
	margin: 80rpx 0;
	display: flex;
	flex-flow:row wrap;
	justify-content: space-between;
	view{
		width: 32%;
		height: 100%;
	}
}
.top-info-left{
	.title{
		width: 100%;
		height: 30rpx;
		line-height: 30rpx;
		font-size: 26rpx;
		text-align: center;
	}
	.text{
		width: 100%;
		height: 40rpx;
		line-height: 40rpx;
		font-size: 40rpx;
		font-weight: bold;
		margin-top: 50rpx;
		text-align: center;
	}
}
.top-info-right{
	display: flex;
	justify-content: center;
	// align-items: center;
	padding-top: 72rpx;
	box-sizing: border-box;
	view{
		width: 134rpx;
		height: 48rpx;
		line-height: 48rpx;
		text-align: center;
		font-size: 23rpx;
		color: #35a551;
		background: #f1f1f1;
		border-radius: 10rpx;
		margin: 0 10rpx;
	}
}
.income{
	width: 100%;
	text-align: center;
	height: 28rpx;
	font-size: 22rpx;
	color: #aeaeae;
	margin-top: 54rpx;
}
.money{
	width: 100%;
	height: 63rpx;
	line-height: 63rpx;
	font-size: 53rpx;
	font-weight: bold;
	margin-top: 32rpx;
	text-align: center;
	text{
		font-size: 23rpx;
		margin-left: 6rpx;
	}
}
.top-btn{
	width: 100%;
	height: 48rpx;
	display: flex;
	justify-content: center;
	align-items: center;
	margin-top: 53rpx;
	view{
		width: 134rpx;
		height: 48rpx;
		line-height: 48rpx;
		text-align: center;
		font-size: 23rpx;
		color: #35a551;
		background: #f1f1f1;
		border-radius: 10rpx;
		margin: 0 10rpx;
	}
}
.content-bottom{
	width: 100%;
	padding: 0 66rpx;
	box-sizing: border-box;
	margin-top: 50rpx;
	display: flex;
	flex-flow:row wrap;
	justify-content: space-between;
}
.bottom-view{
	.title{
		height: 35rpx;
		line-height: 35rpx;
		font-size: 20rpx;
		text-align: center;
		text{
			font-size: 28rpx;
			font-weight: bold;
		}
	}
	.name{
		text-align: center;
		height: 30rpx;
		line-height: 30rpx;
		font-size: 25rpx;
		color: #b9b9b9;
		margin-top: 18rpx;
	}
}
.bootom-content{
	width: 100%;
	// height: 400rpx;
	margin-top: 40rpx;
	background-color: #fff;
	border-radius: 20rpx;
	box-shadow: 0px 0px 30rpx 0px rgba(0, 0, 0, 0.12);
	padding: 10rpx 20rpx;
	box-sizing: border-box;
}
.bootom-content>view:nth-last-child(1){
	border-bottom: none;
}
.list{
	width: 100%;
	height: 90rpx;
	border-bottom: 1rpx dotted #C0C0C0;
	display: flex;
	flex-flow:row wrap;
	justify-content: space-between;
}
.list-left{
	height: 90rpx;
	display: flex;
	align-items: center;
}
.list-right{
	height: 90rpx;
	display: flex;
	align-items: center;
}
.pop-view{
	width: 100%;
	padding: 30rpx 69rpx 142rpx 69rpx;
	box-sizing: border-box;
	background: #f4f4f4;
}
.pop-title{
	width: 100%;
	height: 39rpx;
	line-height: 39rpx;
	font-size: 28rpx;
	font-weight: bold;
	text-align: center;
}
.pop-image{
	width: 100%;
	height: 377rpx;
	display: flex;
	justify-content: center;
	align-items: center;
	margin-top: 44rpx;
	image{
		width: 377rpx;
		height: 377rpx;
	}
}
.logo-view{
	width: 100%;
	height: 193rpx;
	padding: 50rpx 0 0 71rpx;
	box-sizing: border-box;
	position: relative;
	margin-top: 30rpx;
	margin-bottom: 43rpx;
	image{
		width: 100%;
		height: 100%;
		position: absolute;
		top: 0;
		left: 0;
		z-index: -1;
	}
}
.logo-view-title{
	height: 29rpx;
	font-size: 29rpx;
	font-family: PingFang SC;
	font-weight: bold;
	color: #FF8400;
	line-height: 29rpx;
}
.logo-view-name{
	height: 22rpx;
	font-size: 22rpx;
	font-family: PingFang SC;
	font-weight: 400;
	color: #999999;
	line-height: 22rpx;
	margin-top: 11rpx;
}
.logo-view-btn{
	width: 169rpx;
	height: 52rpx;
	line-height: 52rpx;
	text-align: center;
	background: #FF8400;
	border-radius: 26rpx;
	font-size: 28rpx;
	font-family: PingFang SC;
	font-weight: bold;
	color: #F2FBFF;
	// margin-top: 10rpx;
}
</style>
